<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content" style="margin-left: -12px">{{title}}</p>
    </Yq-header>
    <div style="width: 100%;height: 38px;"><span>&nbsp;&nbsp;</span></div>
    <checker
      v-model="vipSel"
      default-item-class="demo5-item"
      selected-item-class="demo5-item-selected"
    >
      <checker-item v-for="vipList in vipList" :value="vipList.itemId">
        <div class="vipListBox">
          <p style="color: #f95320;font-size: 18px;">{{vipList.vipStr}}</p>
          <p style="color: #636363;font-size: 15px;" v-if="vipList.payType!==''&&vipList.payType === 1">¥{{vipList.nowPrice}}</p>
          <p style="color: #636363;font-size: 15px;" v-if="vipList.payType!==''&&vipList.payType === 2">{{vipList.pointPrice}}积分</p>
          <p style="color: #a9a9a9;font-size: 12px;">{{vipList.name}}</p>
        </div>
      </checker-item>
    </checker>
    <flexbox>
      <x-button v-if="xufei!=='true'" type="primary" @click.native="getMemberFn" action-type="button" style="width: 40%;background: #3d82e5;margin: 20px auto 0 auto;font-size: 13px;">立即开通</x-button>
      <x-button v-if="xufei==='true'" type="primary" @click.native="getMemberFn" action-type="button" style="width: 40%;background: #3d82e5;margin: 20px auto 0 auto;font-size: 13px;">立即续费</x-button>
    </flexbox>
    <group title="会员权益">
      <ul style="font-size: 15px;padding: 10px 5px 10px 15px;list-style: none;color: #666">
        <li style="padding: 0 0 5px 0">1、电话医生提供的7×24小时专业健康咨询服务</li>
        <li style="padding: 0 0 5px 0">2、预约挂号服务覆盖川内300多家知名医院，轻松预约，挂号不难</li>
        <li style="padding: 0 0 5px 0">3、专业陪诊服务，让就医过程更从容，省时省力省心</li>
        <li style="padding: 0 0 5px 0">4、享受全场数百种中老年适用商品9折会员优惠，及全场包邮特权（新疆，西藏，内蒙古，青海，海南，宁夏，港澳台地区除外）</li>
        <li style="padding: 0 0 5px 0">5、会员在孝心商城消费，专享高额消费返利，积分基准返点比例为商品支付金额的100%</li>
        <li style="padding: 0 0 5px 0">6、独享积分转入余额权益，积分兑现比例为：20积分兑现1元，余额可用于孝心商城全额消费</li>
      </ul>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, XButton, Flexbox, FlexboxItem, Checker, CheckerItem, Alert } from 'vux'
  import * as urls from '../../../../api/urls'
  import * as types from '../../../../store/types'
  import YqHeader from '../../../../components/YqHeader.vue'
  import {API_ROOT} from '../../../../config.js'
  import $ from 'jquery'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      Flexbox,
      FlexboxItem,
      Checker,
      CheckerItem,
      YqHeader,
      Alert
    },
    data () {
      return {
        show: false,
        message: '',
        title: '开通会员',
        xufei: 'false',
        vipSel: 1,
        vipType: '',
        vipList: [],
        userId: ''
      }
    },
    methods: {
      onHide () {
        if (this.message === '请先绑定手机号') {
          this.$router.push({
            path: '/UserInformation'
          })
          this.$router.go(1)
        }
      },
      onShow () {
      },
      getMemberFn () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        that.http(urls.userIndex, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.user.tel !== '' && res.data.user.tel !== null && res.data.user.tel !== undefined) {
              that.vipList.forEach(function (item) {
                if (that.vipSel === item.itemId) {
                  that.$store.commit(types.USER_ORDER, {vip: {itemId: item.itemId, payType: item.payType, price: item.nowPrice, point: item.pointPrice}})
                  if (item.payType === 2) {
                    that.$router.push({
                      path: '/member/PayMember'
                    })
                    that.$router.go(1)
                  } else {
                    that.http(urls.buyVip, {userId: userId, itemId: item.itemId}, function (res) {
                      if (res.status === 100) {
                        window.sessionStorage.setItem('isVip', true)
                        window.sessionStorage.setItem('mianOrderId', res.data.orderMain.id)
                        window.sessionStorage.setItem('money', '')
                        window.sessionStorage.setItem('useScore', '')
                        window.location.href = '/api/wxAuth/go/shoppingCar+shoppingBuy'
                      } else {
                        that.show = true
                        that.message = res.errMsg
                      }
                    }, function (res) {
                      that.show = true
                      that.message = '服务器错误，请稍后重试'
                    })
                  }
                }
              })
            } else {
              that.show = true
              that.message = '请先绑定手机号'
            }
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res
        })
      },
      getVipList () {
        let that = this
        that.http(urls.vipItem, {}, function (res) {
          if (res.status === 100) {
            if (res.data.data.length !== 0) {
              that.vipList = res.data.data
              that.vipSel = res.data.data[0].itemId
            }
            that.weixinfn26()
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      weixinfn26 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t51' + '&uid=' + userId
        that.$wechat.ready(function () {
          that.$wechat.onMenuShareAppMessage({
            title: '孝行通会员，尊享多重特权', // 分享标题
            desc: '独享7×24小时私人医生、预约挂号、陪诊、全场9折、消费返利、积分兑现', // 分享描述
            link: link, // 分享链接
            imgUrl: logo, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          that.$wechat.onMenuShareTimeline({
            title: '孝行通会员，尊享多重特权', // 分享标题
            link: link, // 分享链接
            imgUrl: logo, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
        })
        $.ajax({
          url: API_ROOT + '/api/wxAuth/jsauth?url=' + encodeURIComponent(url + '/static/index.html'),
          type: 'post',
          success: function (t) {
            if (t.status === 100) {
              let sign = t.data.sign
              let weixinConfig7 = {
                debug: false,
                appId: sign.appId,
                timestamp: sign.timeStamp,
                nonceStr: sign.nonceStr,
                signature: sign.signature,
                jsApiList: ['onMenuShareAppMessage', 'chooseWXPay', 'onMenuShareTimeline']
              }
              // 授权
              that.$wechat.config(weixinConfig7)
              // 调用ready初始化
            } else {
              that.weixinfn7()
            }
          },
          error: function (t) {
            that.weixinfn7()
          }
        })
      }
    },
    mounted: function () {
      if (window.sessionStorage.getItem('userId') === '' || window.sessionStorage.getItem('userId') === null || window.sessionStorage.getItem('userId') === undefined) {
        // this.userId = this.getQueryString('userId')
        this.userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          window.sessionStorage.setItem('userId', this.userId)
          this.getVipList()
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t51'
        }
      } else {
        this.userId = window.sessionStorage.getItem('userId')
        this.getVipList()
      }
      this.xufei = window.sessionStorage.getItem('xufei')
      if (this.xufei === 'true') {
        this.title = '续费会员'
      }
      this.getVipList()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    background-clip: padding-box;
    border: solid 1px grey;
    margin: 8px 5px ;
  }
  .demo5-item {
    width: 46.25%;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin: 8px 5px 0 5px;
  }
  .demo5-item-selected {
    background: #ffffff url(../../../../assets/images/user/member_icon.png) no-repeat right bottom;
    background-size: 25px;
    border-color: #3d82e5;
  }
  .vipListBox>p{
    margin-left: 10px;
  }
  .vipListBox>p:nth-child(1){
    color: #ef8616;
    font-size: 20px;
  }
  .vipListBox>p:nth-child(3){
    color: grey;
    font-size: 10px;
  }
</style>
